<template>
  <div>
    <el-form ref="renewFormRef" :rules="rules" :model="renewForm.data" label-width="120">
      <el-row>
        <el-form-item label="车牌号码:">
          <div style="width: 320px">{{ renewForm.data.licensePlate }}</div>
        </el-form-item>
        <el-form-item label="车主手机:">
          <div style="width: 320px">{{ renewForm.data.ownerPhone }}</div>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="卡类型:">
          <div style="width: 320px">{{ renewForm.data.type }}</div>
        </el-form-item>
        <el-form-item label="生效时间:">
          <div style="width: 320px">{{ renewForm.data.validityStart }}</div>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="失效时间:">
          <div style="width: 320px">{{ renewForm.data.oldValidityEnd }}</div>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="选择数量" prop="buyUnit">
          <el-input-number
            v-model="renewForm.data.buyUnit"
            style="width: 320px"
            :min="1"
            controls-position="right"
            @change="getBuyUnit(renewForm.data.buyUnit)"
          />
        </el-form-item>
        <el-form-item label="续费后失效时间" prop="validityEnd">
          <el-date-picker
            v-model="renewForm.data.validityEnd"
            style="width: 320px"
            type="date"
            value-format="YYYY-MM-DD"
            disabled
          />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="购买金额" prop="buyPrice">
          <el-input v-model="renewForm.data.buyPrice" style="width: 320px" disabled />
        </el-form-item>
        <el-form-item label="付款方式" prop="payWay">
          <!-- <el-select
            v-model="renewForm.data.payWay"
            filterable
            style="width: 320px"
            placeholder="请选择付款方式"
          >
            <el-option
              v-for="item in payWayList.data"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select> -->
          <el-radio-group v-model="renewForm.data.payWay">
            <el-radio v-for="item in payWayList.data" :key="item.id" :value="item.id">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="备注">
          <el-input
            v-model="renewForm.data.remark"
            maxlength="20"
            show-word-limit
            type="textarea"
            style="width: 320px"
          />
        </el-form-item>
      </el-row>
      <el-form-item>
        <div class="footer">
          <div></div>
          <div>
            <el-button class="reset-btn" @click="resetForm(renewFormRef)"
              >取 消</el-button
            >
            <el-button class="confirm-btn" @click="submitForm(renewFormRef)"
              >确 认</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from "vue";
import { getCardType, getRenewCparkCard } from "../request.js";
const emits = defineEmits(["operationDone"]);

const props = defineProps({
  operationId: {
    type: Object,
    default: () => {},
  },
  listData: {
    type: Object,
    default: () => {},
  },
});
console.log(props.operationId);
console.log(props.listData);

const lotIdList = reactive({
  data: {},
});

const typeList = reactive({
  data: [],
});

const renewFormRef = ref("");
const renewForm = reactive({
  data: {
    id: props.operationId.id,
    licensePlate: props.operationId.licensePlate,
    ownerPhone: props.operationId.ownerPhone,
    type: props.operationId.type,
    validityStart: props.operationId.validityStart,
    oldValidityEnd: props.operationId.validityEnd,
    typeId: props.operationId.typeId,
    status: props.operationId.status,
    buyUnit: 1,
  },
});

const payWayList = reactive({
  data: [
    {
      id: 1,
      name: "微信",
    },
    {
      id: 2,
      name: "支付宝",
    },
    {
      id: 3,
      name: "现金",
    },
  ],
});

const rules = reactive({
  buyUnit: [{ required: true, message: "请选择选择数量", trigger: "change" }],
  payWay: [{ required: true, message: "请选择付款方式", trigger: "change" }],
});

onMounted(() => {
  lotIdList.data = props.listData.lotIdList;
});

// 选择数量
const getBuyUnit = (val) => {
  console.log("数量 ===》", val);
  if (!renewForm.data.typeId) return;
  // status == 2 生效中
  // status == 3 已过期
  let start = "";
  if (renewForm.data.status == 3) {
    start = new Date(new Date().toISOString().split("T")[0]);
    start.setDate(start.getDate());
  } else {
    start = new Date(renewForm.data.oldValidityEnd);
    start.setDate(start.getDate() + 1);
  }
  typeList.data.forEach((item) => {
    if (renewForm.data.typeId == item.id) {
      console.log(item.price);
      renewForm.data.buyPrice = parseInt(val) * parseFloat(item.price);
      // 卡类型 1-月卡 2-季卡 3-年卡
      let months = 0;
      switch (item.type) {
        case 1:
          months = renewForm.data.buyUnit;
          break;
        case 2:
          months = renewForm.data.buyUnit * 3;
          break;
        case 3:
          months = renewForm.data.buyUnit * 12;
          break;
      }
      start.setMonth(start.getMonth() + months);
      const end = new Date(start);
      end.setDate(end.getDate() - 1);
      const dateString = end.toISOString().split("T")[0]; // 获取ISO日期字符串的日期部分
      // console.log(dateString);
      renewForm.data.validityEnd = dateString;
    }
  });
};

const getData = async () => {
  await getCardType({
    lotId: renewForm.data.lotId,
  }).then((res) => {
    console.log(res);
    typeList.data = res.data.result;
    // status == 2 生效中
    // status == 3 已过期
    let start = "";
    if (renewForm.data.status == 3) {
      start = new Date(new Date().toISOString().split("T")[0]);
      start.setDate(start.getDate());
    } else {
      start = new Date(renewForm.data.oldValidityEnd);
      start.setDate(start.getDate() + 1);
    }
    typeList.data.forEach((item) => {
      if (renewForm.data.typeId == item.id) {
        renewForm.data.buyPrice =
          parseInt(renewForm.data.buyUnit) * parseFloat(item.price);
        // 卡类型 1-月卡 2-季卡 3-年卡
        let months = 0;
        switch (item.type) {
          case 1:
            months = renewForm.data.buyUnit;
            break;
          case 2:
            months = renewForm.data.buyUnit * 3;
            break;
          case 3:
            months = renewForm.data.buyUnit * 12;
            break;
        }
        start.setMonth(start.getMonth() + months);
        const end = new Date(start);
        end.setDate(end.getDate() - 1);
        const dateString = end.toISOString().split("T")[0]; // 获取ISO日期字符串的日期部分
        renewForm.data.validityEnd = dateString;
      }
    });
  });
};

getData();

const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      const data = {
        buyUnit: renewForm.data.buyUnit,
        validityEnd: renewForm.data.validityEnd,
        buyPrice: renewForm.data.buyPrice,
        payWay: renewForm.data.payWay,
        remark: renewForm.data.remark,
      };
      const id = renewForm.data.id;
      getRenewCparkCard({ data, id }).then((res) => {
        if (res.data.code === 0) {
          ElMessage({
            type: "success",
            message: res.data.result,
          });
          emits("operationDone");
        } else {
          ElMessage.error(res.data.msg);
        }
      });
    }
  });
};

const resetForm = (formEl) => {
  if (!formEl) return;
  renewForm.data = {};
  formEl.resetFields();
  emits("operationDone");
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.reset-btn {
  width: 65px;
  height: 32px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
}
.confirm-btn {
  width: 65px;
  height: 32px;
  background: #007aff;
  border-radius: 2px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
}
</style>
